<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>selectCase</title>
	
	<style>
		body {
		  padding-top: 3.5rem;
		}
		img {
			width:100px;
			height:100px;
		}
	</style>
	
    <!-- Bootstrap core CSS -->
    <link href="./styles/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
		  <ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="selectInterface.html">电子支付:选择接口</a></li>
			<li class="breadcrumb-item active" aria-current="page">选择案例</li>
		  </ol>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="案例名称" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <main role="main" class="mt-5">
      <div class="container-fluid" style="text-align:center">
        <table class="table table-bordered table-hover">
		  <thead class="thead-dark">
			<tr>
			  <th scope="col">序号</th>
			  <th scope="col">案例编号</th>
			  <th scope="col">案例名称</th>
			  <th scope="col">案例说明</th>
			  <th scope="col">案例状态</th>
			  <th scope="col">操作</th>
			</tr>
		  </thead>
		  <tbody id="row1">
		  </tbody>
		</table>
        <hr>
      </div> <!-- /container -->
    </main>

    <footer class="container">
      <p>&copy; Company 电子支付</p>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="js/jquery-slim.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/cookie_util.js"></script>
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
    <script type="text/javascript">
    	var caseTemplate = '<tr>'+
	    						'<th scope="row">[seq]</th>'+
	    						'<td>[caseId]</td>'+
	    						'<td>[caseName]</td>'+
	    						'<td>[caseExplain]</td>'+
	    						'<td class="[caseStatusStyle]">[caseStatusDesc]</td>'+
	    						'<td><button class="btn btn-outline-success my-2 my-sm-0" onclick="preData()">案例联调</button></td>'+
	    					'</tr>';
	    
    	$(function(){
    		var caseList = JSON.parse(localStorage.getItem("caseList"));
    		for(var i = 0 ; i < caseList.length ; i++){
    			var caseId = caseList[i].caseId;
    			var caseName = caseList[i].caseName;
    			var caseExplain = caseList[i].caseExplain;
    			var caseStatusDesc;
    			var caseStatusStyle;
    			if(caseList[i].caseStatus != null && caseList[i].caseStatus == 0){
    				caseStatusDesc = '通过';
    				caseStatusStyle = 'text-success';
    			}else{
    				caseStatusDesc = '未通过';
    				caseStatusStyle = 'text-danger';
    			}
    			var div = caseTemplate.replace("[seq]",i+1)
    								  .replace("[caseId]",caseId)
    								  .replace("[caseName]",caseName)
    								  .replace("[caseExplain]",caseExplain)
    								  .replace("[caseStatusStyle]",caseStatusStyle)
    								  .replace("[caseStatusDesc]",caseStatusDesc);
    			$("#row1").append(div);
    		}
    	});
    	
		function preData(){
			location.href="inputData.html";
		}    	
    </script>
  </body>
</html>
